<template>
	<view class="content">
		<my-top v-if="identity=='班主任'" :url="this.bzrUrl" :topName="topName" :userName="userName"
			:buildingNo="buildingNo"></my-top>
		<my-top v-else :url="this.url" :topName="topName" :userName="userName" :buildingNo="buildingNo"></my-top>
		<view class="indexContent" v-if="isRep">
			<view class="leaveNav">
				<view style="margin-left:45rpx;font-weight: 800;font-size: 42rpx;">{{titleHead}}
					<view class="leaveLine"></view>
				</view>
				<button @click="skip()" class="leaveBtn">报修设备</button>
			</view>
			<view class="repDevice" @click="skip()">没有报修记录 请点击报修设备</view>
		</view>
		<view class="indexContent" v-else>
			<view class="leaveNav">
				<view style="margin-left:45rpx;font-weight: 800;font-size: 42rpx;margin-top: 10rpx;">{{titleHead}}
					<view class="leaveLine" style="margin-top: 10rpx;"></view>
				</view>
				<button @click="skip()" class="leaveBtn">报修设备</button>
			</view>
			<view v-for="(item,index) in repArr" :key="index" @click="checkDetail(item,index)">
				<view class="repDeviceList">
					<view style="color:red;text-align: left;font-size: 32rpx;">{{item.area}}</view>
					<view style="color:red;font-size: 32rpx;">{{item.className}}</view>
					<!-- <view style="color:red" v-if="item.dormitoryNo">{{item.dormitoryNo}}</view> -->
					<view style="font-size: 32rpx;">{{item.createTime}}</view>
					<view v-if="item.status=='0'" style="color:blue;text-align: right;font-size: 32rpx;">已报修
						<span v-show="!item.isShow" class="iconfont icon-xiajiantou"></span>
						<span v-show="item.isShow" class="iconfont icon-shangjiantou"></span>
					</view>
					<view v-if="item.status=='1'" style="color:red;text-align: right;font-size: 32rpx;">处理中
						<span v-show="!item.isShow" class="iconfont icon-xiajiantou"></span>
						<span v-show="item.isShow" class="iconfont icon-shangjiantou"></span>
					</view>
					<view v-if="item.status=='2'" style="text-align: right;font-size: 32rpx;">处理完
						<span v-show="!item.isShow" class="iconfont icon-xiajiantou"></span>
						<span v-show="item.isShow" class="iconfont icon-shangjiantou"></span>
					</view>
				</view>
				<view class="timePos" v-show="item.isShow">
					<view style="color:#8F8F94;font-size: 28rpx;">
						<span>
							报修细节情况：
						</span>
						<view>{{item.repairDesc}}</view>
					</view>

				</view>
			</view>

		</view>
		<!-- <my-bottom :topName="topName" :bottomArr="roleName!='部门经理'?attendanceTecArr:attendanceArr"></my-bottom> -->

		<!-- <bottom-com :topName="topName" :bottomArr="roleName!='部门经理'?attendanceTecArr:attendanceArr"></bottom-com>		 -->
	</view>
</template>

<script>
	import topCom from '@/pages/component/topCom.vue'
	import bottomCom from '@/pages/component/bottom.vue'
	import headTitle from '@/pages/component/btnHeadeCom.vue'
	import {
		createApp
	} from 'vue';

	export default {
		name: 'repStatus',
		data() {
			return {
				identity: "",
				bzrUrl: "/page_main/dutyCheckWorkAttendance/dutyTecIndex",
				url: "/page_main/dutyCheckWorkAttendance/dutyIndex/dutyIndex",
				current: 0,
				roleName: '',
				detailMsg: "",
				classId: '',
				isRep: false,
				isShowList: false,
				topName: '报修登记',
				userName: '',
				titleHead: '报修状况',
				btnFont: '报修设备',
				classDeptId: '',
				dormitoryId: '',
				dormitoryNo: '',
				buildingNo: "",
				type: '维修',
				repArr: [{
					time: '2022-2-10',
					status: '处理中',
					msg: '1、电器损坏',
					isShow: false,
				}, {
					time: '2022-2-11',
					status: '已报修',
					msg: '1、水龙头损坏',
					isShow: false,
				}, {
					time: '2022-2-12',
					status: '处理完',
					msg: '1、电器损坏',
					isShow: false
				}, ],

				attendanceArr: [{
						name: 'home',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/page_main/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/page_main/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/page_main/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					}
				],
				attendanceTecArr: [{
						name: 'home',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/page_main/dutyCheckWorkAttendance/dutyTecIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/page_main/dutyCheckWorkAttendance/dutyTecIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/page_main/dutyCheckWorkAttendance/dutyTecIndex'
					}
				],
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "userInfo",
				success: (res) => {
					that.roleName = res.data
				}
			})
			uni.getStorage({
				key: "loginName",
				success: (res) => {
					that.userName = res.data
				}
			})
		},
		onLoad(options) {
			this.identity = uni.getStorageSync("userInfo")
			console.log(this.identity)
			uni.removeStorage({
				key: "dormitoryId"
			})
			uni.removeStorage({
				key: "classDeptId"
			})
			this.dormitoryId = options.dormitoryId
			if (this.dormitoryId) {
				this.dormitoryNo = options.dormitoryNo
				// this.topName = this.dormitoryNo
				this.buildingNo = options.buildingNo
				uni.setStorageSync("dormitoryId", this.dormitoryId)
				uni.setStorageSync("dormitoryNo", this.dormitoryNo)
				uni.setStorageSync("buildingNo", this.buildingNo)
				uni.setStorageSync("classDeptId", this.classDeptId)

				// uni.setStorage({
				// 	key:'dormitoryId',
				// 	data:this.dormitoryId
				// })
				// uni.setStorage({
				// 	key:'dormitoryNo',
				// 	data:this.dormitoryNo
				// })
				// uni.setStorage({
				// 	key:'buildingNo',
				// 	data:this.buildingNo
				// })
				// uni.setStorage({
				// 	key:'classDeptId',
				// 	data:this.classDeptId
				// })

			} else {
				// this.topName = options.className
				this.classId = options.classId
				this.classDeptId = options.classDeptId
				uni.setStorageSync("className", this.topName)
				uni.setStorageSync("classId", this.classId)
				uni.setStorageSync("classDeptId", this.classDeptId)
				// uni.setStorage({
				// 	key:'className',
				// 	data:this.topName
				// })
				// uni.setStorage({
				// 	key:'classId',
				// 	data:this.classId
				// })
				// uni.setStorage({
				// 	key:'classDeptId',
				// 	data:this.classDeptId
				// })
			}



		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},
		mounted() {
			this.type = "报修"
			this.getAppHisRepListByBId()

		},
		methods: {
			getAppHisRepListByBId() {
				uni.request({
					url: uni.url + `Repair/getAllRepairByCreatedBy?username=${this.userName}`,
					success: res => {
						console.log(res);
						this.repArr = res.data.data
						if (this.repArr.length > 0) {
							// this.userName =this.repArr[0].buildingNo
						}
						if (this.repArr.length == 0) {
							this.isRep = true
						} else {
							this.repArr.forEach((item, index) => {
								item.isShow = false
								// if(item.className){
								// 	item.className = item.area +item.className
								// }else if(item.dormitoryNo){
								// 	item.dormitoryNo = item.area +item.dormitoryNo 
								// }			
							})
						}
					}
				})

			},
			skip() {
				uni.navigateTo({
					url: `/page_main/dutyCheckWorkAttendance/dutyMaintenanceDetail`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			checkDetail(item, index) {
				this.$forceUpdate()
				item.isShow = !item.isShow
			}
		}
	}
</script>

<style>
	.timePos {
		position: relative;
		top: 0rpx;
		right: -20rpx;
		background: white;
		border: 1px solid #cccc;
		border-radius: 20rpx;
		padding: 20rpx;
		width: 630rpx;
		margin-bottom: 20rpx;
	}

	.repDeviceList {
		font-size: 38rpx;
		color: #808080;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		padding: 20rpx 20rpx;
		align-items: center;
		border-bottom: 1rpx solid #e9e9e9;
		margin-left: 20rpx;
		margin-right: 20rpx;
		/* padding-right: 90rpx; */
	}

	.repDeviceList view {
		flex: 1
	}

	.repDeviceList view:nth-child(3) {
		flex: 1.5
	}


	.repDevice {
		text-align: center;
		font-size: 32upx;
		color: #808080;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 260rpx;
		height: 80rpx;
		color: white;
		font-size: 38rpx;
		line-height: 80rpx;
		font-weight: 0;
		margin-left: 100rpx;
		background-color: #FFFFFF !important;
		border: 0 !important
	}

	.leaveLine {
		width: 180upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: 0upx;
		left: -10upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;
	}

	.leaveCheck {
		margin-left: 60upx;
		margin-bottom: 30upx;

	}

	.indexContent {
		/* height: 100vh; */
	}
</style>